<template>
    <div>
        <div class="animate__animated animate__tada">
            <el-table-column style="width: 40%; margin: auto; margin-top: 30px;">            
                  <el-input v-model="search" size="mini" clearable placeholder="请输入要查询的关键字"/>                 
            </el-table-column>
        </div>
       <!-- 展示列表 -->
        <el-table
                :data="tableData.filter(data => !search || data.country_name.toLowerCase().includes(search.toLowerCase()) 
                || data.english_name.toLowerCase().includes(search.toLowerCase()))"
                stripe    
                :height="480"           
                highlight-current-row
                style="width: 40%; margin: auto; margin-top: 10px;" 
                class="animate__animated animate__backInLeft">
            <!-- <el-table-column fixed prop="id" label="编号"> </el-table-column> -->
                                     
            <el-table-column prop="country_name" label="中文国家名"></el-table-column>
                
            <el-table-column prop="english_name" label="英文国家名"></el-table-column>
                                
            
        </el-table> 

        <!--分页  @current-change="page"绑定点击页数-->
        <!-- <el-pagination
                style="margin-top: 10px;"
                background
                layout="prev, pager, next"
                page-size="10"
                :total="total"
                @current-change="page"
                >
        </el-pagination> -->

        <div style="margin-top: 20px;" class="animate__animated animate__fadeInUp">               
          <el-button type="info" round v-on:click="toLearn">点击返回轮播学习</el-button>
        </div>

    </div>
</template>

<script>
    export default {
      data() {
            return {
                total: null, //总页数
                tableData: null, //表单数据
                search: '',           
            }
          },          
          created() {
             this.findAllData();
          },
          methods: {
            // page(currentPage) { //获取每页展示的条数并展示
            //     const _this = this
            //     this.axios.get('/country/findAll/' + currentPage + '/10').then(function (resp) {
            //         _this.tableData = resp.data.content
            //         _this.total = resp.data.totalElements
            //         _this.pageSize = resp.data.size
            //     })
            // },             
            resetForm(formName) {
              this.$refs[formName].resetFields();
            },  
            findAllData(){
              const _this = this
              this.axios.get('/country/findAll').then(function (resp) {
                  _this.tableData = resp.data  //拿到数据库的数据
                  // _this.tableData = resp.data.content   //拿到数据库的数据
                  // _this.total = resp.data.totalElements  //拿到总页数
              })
            }, 
            toLearn(){
              this.$router.replace('/home')   
            }            
          }           
        }         
</script>

<style>
    .transition-box {
    margin-left: 19%;
    margin-top: 10px;   
    height: 200px;
    border-radius: 4px;
    text-align: center;
    box-sizing: border-box;
  }
</style>

